<template>
	<view class="hot-list">
		<view class="top"></view>
		<view class="head">
			<text class="head-title">热榜</text>
		</view>
		<view v-for="hot in hotList" :key="hot.id">
			<view class="list" @click="details(hot.newsId)">
				<text class="ranking">{{hot.id}}</text>
				<text>{{hot.title}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import hotList from '@/data/hot.js';

	export default {
		data() {
			return {
				hotList: hotList
			}
		},
		methods: {
			details(id) {
				if (id < 4) {
					uni.navigateTo({
						url: '../news/details?id=' + id
					});
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
	  overflow: hidden;
	}
	
	.hot-list {
		padding-bottom: 1rem;
		background-color: #f2f2f3;
		min-height: 100vh;

		.top {
			height: var(--status-bar-height);
			background-color: #DA2A2E;
		}

		.head {
			padding: 1rem 0;
			width: 100%;
			height: 3rem;
			color: white;
			background-color: white;
			text-align: center;
			background-color: #DA2A2E;
		}

		.head-title {
			font-size: 2rem;
			font-weight: bold;
			font-style: italic;
		}

		.list {
			width: 100%;
			padding: 1rem 1rem 1rem 1rem;
			background-color: white;
			border-bottom: #f2f2f3 solid 0.1rem;
		}

		.ranking {
			color: #DA2A2E;
			padding-right: 1rem;
		}
	}
</style>
